<template lang="html">
    <div class="loading">
        <svg width="0.53rem" height="0.71rem" style="margin:0.12rem 0.21rem" viewBox="0 0 191.99 230.988" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
            <g stroke="#ff5c2c" stroke-width="35" transform="translate(-50, -30)">
            <path id="svg_2" stroke-linecap="round" stroke-linejoin="round" d="M154.536,41.63c0,0-53.477,75.311-67.383,94.663c-25.189,35.051-11.875,105.542,57.559,105.542c58.324,0,89.871-75.253,34.835-120.635l-44.72,63"/>
            </g>
        </svg>
    </div>
</template>
<script>

</script>

<style scoped>
.loading{
    /* display: none; */
    position:fixed;
    top:50%;
    left:50%;
    z-index:100;
    width:0.95rem;
    height:0.95rem;
    margin-left:-0.47rem;
    margin-top:-0.47rem;
    background: #fff;
    border-radius: 0.2rem;
    box-shadow: 0px 0px 8px #7f7f7f;
}
path {
  fill: transparent;
  stroke-dasharray: 590px;
  animation-name: outline;
  animation-duration: 1.5s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: both;
  animation-iteration-count:infinite;

}
@keyframes outline {
  0% {
    stroke-dashoffset: 600px;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

</style>